<template>
  <view class="container">
    <!-- 顶部图片 -->
    <view class="top-box">
      <image class="top-image" src="/static/images/home-head.png" mode="heightFix"></image>
      <view class="top-txt-box">
        <view class="top-txt-one">我的课程</view>
        <view class="top-txt-two">加入心仪课程，追踪学习之旅！</view> 
      </view>
    </view>
    
    <!-- 主内容容器 -->
    <view class="content-container">
      <view class="tab">
        <image v-show="currentTab === 0" class="tab-right" src="/static/images/home-tab-bg-right.png" mode="scaleToFill"></image>
        <image v-show="currentTab === 1" class="tab-left" src="/static/images/home-tab-bg-left.png" mode="scaleToFill"></image>
        <view class="tab-item" :class="{ 'tab-item-ed': currentTab === 0 }" @click="switchTab(0)">
          <text>进行中</text>
          <view v-show="currentTab === 0" class="tab-item-line"></view>
        </view>
        <view class="tab-line"></view>
        <view class="tab-item" :class="{ 'tab-item-ed': currentTab === 1 }" @click="switchTab(1)">
          <text>已结束</text>
          <view v-show="currentTab === 1" class="tab-item-line"></view>
        </view>
      </view>
      
      <!-- 滚动列表 -->
      <scroll-view v-if="courseList.length" class="course-list" scroll-y="true" :show-scrollbar="false" @scrolltolower="handleScrollToLower">
        <view class="course-item" v-for="(item, index) in courseList" :key="index" @click="handleGoCourse(item)">
          <view class="course-title">{{ item.courseName }}</view>
          <view class="course-time">{{ getTimeStr(item) }}</view>
          <view v-if="currentTab === 0" class="course-progress">
            <view class="progress-bar">
              <view class="progress-fill" :class="getListProgress(item) >= 100 ? 'progress-fill-green' : ''" :style="{ width: getListProgress(item) + '%' }"></view>
            </view>
            <text class="progress-text">{{ getListProgress(item) }}%</text>
          </view>
          <view v-else class="course-progress">
            <view class="progress-bar">
              <view class="progress-fill progress-fill-green" :style="{ width: '100%' }"></view>
            </view>
            <image class="progress-icon" src="/static/images/icon_success.png" mode="scaleToFill"></image>
          </view>
        </view>
        <!-- 加载状态提示 -->
        <view v-if="loading" class="loading-tip">加载中...</view>
        <view v-else-if="!hasMore && courseList.length > 5" class="loading-tip">没有更多了</view>
      </scroll-view>
      <view v-else class="list-nodata">
        <image class="nodata-icon" src="/static/images/nodata.png" mode="scaleToFill"></image>
        <text class="nodata-title">{{ currentTab === 0 ? '暂无课程，请加入课程' : '暂无相关课程'}}</text>
      </view>
      
      <!-- 底部按钮 -->
      <view class="bottom-button" @click="goAudio()">
        <image class="button-icon" src="/static/images/add.png" mode="scaleToFill"></image>
        <text class="button-text">加入课程</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCoursePage } from '@/api/course.js'
import dayjs from 'dayjs'

export default {
  props: {
    refreshIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentTab: 0,
      courseList: [],
      page: 1,        // 当前页码
      limit: 10,      // 每页数量
      total: 0,       // 总数
      loading: false, // 加载状态
      hasMore: true   // 是否还有更多数据
    }
  },
  watch: {
    refreshIndex() {
      this.getList()
    }
  },
  mounted() {
	  this.getList()
  },
  methods: {
    goAudio() {
      console.log('222')
      uni.navigateTo({
        url: `pages/audio/audio`
      })
    },
	  async getList(loadMore = false) {
      if (this.loading) return
      this.loading = true
      try {
        const result = await getCoursePage({
          state: this.currentTab,
          limit: this.limit,
          page: this.page
        })
        
        if (result.list) {
          if (loadMore) {
            // 加载更多，追加数据
            this.courseList = [...this.courseList, ...result.list]
          } else {
            // 首次加载或刷新，替换数据
            this.courseList = result.list
          }
          
          this.total = result.total
          // 判断是否还有更多数据
          this.hasMore = this.courseList.length < this.total
        }
      } catch (e) {
        console.error('获取课程列表失败', e)
      } finally {
        this.loading = false
      }
    },
    // 滚动到底部触发
    handleScrollToLower() {
      if (!this.hasMore || this.loading) {
        return
      }
      
      // 加载下一页
      this.page++
      this.getList(true)
    },
    
    switchTab(index) {
      this.currentTab = index
      // 重置分页状态
      this.page = 1
      this.courseList = []
      this.total = 0
      this.hasMore = true
      this.getList()
    },
    
    handleGoCourse(item) {
      // 跳转到
      console.log('pages/course/index')
      uni.navigateTo({url: `/pages/course/index?courseId=${item.courseId}`})
    },
    getListProgress(item) {
      return Math.round((item.finishLessonCount / item.lessonCount) * 100)
    },
    getTimeStr(item) {
      if (item.deadline) {
        // 格式化时间
        return dayjs(item.deadline).format('YYYY-MM-DD HH:mm') + ' 截止'
      } else return '无期限'
    }
  }
}
</script>

<style lang="scss">
.container{
  width: 100%;
  height: 100%;
  position: relative;
}

.top-box {
  width: 100%;
  height: 348rpx;
  display: block;
  position: relative;
  .top-image {
    width: 100%;
    height: 348rpx;
    display: block;
  }
  .top-txt-box{
    position: absolute;
    left: 64rpx;
    bottom: 80rpx;
    .top-txt-one{
      color: #202844;
      font-size: 48rpx;
      font-weight: 600;
      line-height: 64rpx;
      letter-spacing: 0px;
    }
    .top-txt-two{
      font-size: 24rpx;
      color: rgba(32, 40, 68, 0.65);
      line-height: 40rpx;
      margin-top: 8rpx;
    }
  }
}

.content-container {
  width: 100%;
  height: calc(100% - 348rpx + 48rpx); /* 剩余高度 + 24px 重叠 */
  margin-top: -32rpx; /* 向上移动24px */
  border-top: 2rpx solid #FFFFFF;
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
  overflow: hidden;
  background-color: #F6F7FB; /* 添加背景色，确保内容可见 */
  position: relative;
}

.tab{
  display: flex;
  width: 100%;
  height: 100rpx;
  position: relative;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  .tab-item{
    flex: 1;
    color: #666666;
    font-size: 32rpx;
    position: relative;
    margin-top: 16rpx;
    padding-bottom: 16rpx;
    text-align: center;
    text{
      text-align: center;
    }
    .tab-item-line{
      position: absolute;
      background: #315BF4;
      border-radius: 16rpx;
      width: 48rpx;
      height: 8rpx;
      bottom: 0rpx;
      left: 50%;
      margin-left: -24rpx;
    }
  }
  .tab-item-ed{
    color: #333333;
    font-weight: 600;
  }
  .tab-line{
    width: 100rpx;
  }
  .tab-right{
    position: absolute;
    width: calc(50% + 50rpx);
    height: 100rpx;
    right: 0;
  }
  .tab-left{
    position: absolute;
    width: calc(50% + 50rpx);
    height: 100rpx;
    left: 0;
  }
}

.course-list {
  padding: 44rpx 32rpx;
  width: calc(100% - 64rpx);
  height: calc(100% - 100rpx); /* 总高度 - tab高度 - 底部按钮区域 */
  overflow-y: auto;
}

.course-item {
  width: 100%;
  height: 196rpx;
  border-radius: 24rpx;
  padding: 32rpx 32rpx 16rpx 32rpx;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  margin-bottom: 32rpx;
  
  .course-title {
    width: calc(100% - 90rpx);
    line-height: 44rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    margin-right: 90rpx;
    display: block;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
  }
  
  .course-time {
    line-height: 40rpx;
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 28rpx;
  }
  
  .course-progress {
    display: flex;
    align-items: center;
    flex-direction: row;
    
    .progress-text {
      width: 60rpx;
      font-align: left;
      color: #666666;
      font-size: 24rpx;
      margin-left: 16rpx;
    }

    .progress-icon{
      margin-left: 16rpx; 
      width: 28rpx;
      height: 28rpx;
    }
    
    .progress-bar {
      flex: 1;
      height: 8rpx;
      border-radius: 1600rpx;
      background: #F2F4F6;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: #315BF4;
        border-radius: 1600rpx;
        transition: width 0.3s ease;
      }
      .progress-fill-green{
        background: #2AB55E;
      }
    }
  }
}

.bottom-button {
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 232rpx;
  height: 88rpx;
  background: linear-gradient(270deg, #315BF4 0%, #839DF8 99%);
  box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(5, 33, 80, 0.1);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  z-index: 5;
  
  .button-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 8rpx;
  }
  
  .button-text {
    font-size: 32rpx;
    color: #FFFFFF;
  }
}

.list-nodata{
  width: 100%;
  margin-top: 160rpx;
  display:flex;
  flex-direction: column;
  align-items: center;
  .nodata-icon{
    width: 450rpx;
    height: 336rpx;
  }
  .nodata-title{
    font-size: 28rpx;
    line-height: 44rpx;
    text-align: center;
    color: #999999;
  }
}

.loading-tip {
  width: 100%;
  padding: 40rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #999999;
}
</style>
